<template>
  <div class="content_width_wrapper">
    <div class="gatsby-image-wrapper">
      <img src="/src/assets/InTouch.webp" />
    </div>
    <div class="callout_wrapper">
      <h2 :class="['callout_title', locale === 'zh' ? 'title-zh' : 'title-en']">{{ $t("sixthContentCalloutTitle") }}</h2>
      <!-- <h2 class="callout_title">{{ $t("sixthContentCalloutTitle") }}</h2> -->
      <p class="callout_text">
        {{ $t("sixthContentCalloutText") }}
      </p>
      <div class="secondary_button" @mouseenter="mouseEnterHandle" @mouseleave="mouseLeaveHandle"
        style="fill: rgb(0, 32, 37); color: rgb(0, 32, 37); --progress: 0%">
        <div v-html="$t('headButton')"></div>
        <svg viewBox="0 0 17 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="btn_icon">
          <path
            d="M16.75 2.76923C15.6214 2.18803 14.5723 1.26496 13.6026 -5.83661e-07L12.7681 -5.47182e-07C13.0065 0.547008 13.2449 1.02564 13.4834 1.4359C13.7059 1.84615 13.9285 2.18803 14.151 2.46154L0.25 2.46154L0.25 3.53846L14.151 3.53846C13.9285 3.82906 13.7059 4.17949 13.4834 4.58974C13.2449 5 13.0065 5.47009 12.7681 6L13.6026 6C14.5723 4.75214 15.6214 3.82906 16.75 3.23077L16.75 2.76923Z">
          </path>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
import { mouseLeaveHandle, mouseEnterHandle } from '@/utils/mouse.js'
import { useI18n } from 'vue-i18n';
import { computed } from 'vue';

const { locale } = useI18n();
computed(() => locale.value);
</script>

<style lang="less" scoped>
:root {
  --progress: 0%;
}

.content_width_wrapper {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  flex-direction: row;
  gap: 127px;
  -webkit-box-pack: center;
  justify-content: center;
  padding: 136px 0px;
  margin: 0px auto;
  width: 1214px;

  @media screen and (min-width: 1025px) {
    gap: 8.819vw;
    padding: 9.444vw 0px;
    gap: 8.819vw;
    padding: 9.444vw 0px;
    width: 84.306vw;
  }

  .gatsby-image-wrapper {
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    width: 596px;
    height: 578px;
    border-radius: 30px;

    @media screen and (min-width: 1025px) {
      width: 41.389vw;
      height: 40.139vw;
      border-radius: 2.083vw;
    }

    & img {
      bottom: 0;
      height: 100%;
      left: 0;
      margin: 0;
      max-width: none;
      padding: 0;
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
      object-fit: cover;
      border-radius: inherit;
      max-block-size: 100%;
      max-inline-size: 100%;
    }
  }

  .callout_wrapper {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 493px;
    position: relative;

    @media screen and (min-width: 1024px) {
      width: 34.236vw;
      gap: 2.083vw;
    }

    .callout_title {
      font-family: Gellix;
      font-weight: 500;
      font-size: 120px;
      letter-spacing: -0.04em;

      &.title-en {
        line-height: 85%;
      }

      &.title-zh {
        line-height: 120%;
        letter-spacing: 0.1em;
        // font-size:110px;
      }

      @media screen and (min-width: 1025px) {
        font-size: 8.333vw;
      }
    }

    .callout_text {
      font-family: Gellix;
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 0px;
      line-height: 130%;
      color: rgb(36, 67, 72);
      width: 203px;

      @media screen and (min-width: 1025px) {
        width: 14.097vw;
        font-size: 1.111vw;
      }
    }

    .secondary_button {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: center;
      justify-content: center;
      position: relative;
      width: min-content;
      z-index: 1;
      border: none;
      background: none;
      cursor: pointer;
      transition: color 0.2s ease-in-out 0s;
      font-family: Gellix;
      font-weight: 500;
      font-size: 20px;
      letter-spacing: -0.02em;
      line-height: 130%;
      padding: 18px 30px;
      gap: 15px;

      & div {
        position: relative;
        width: max-content;
      }

      & div::before {
        .underline();
      }

      @media screen and (min-width: 1025px) {
        padding: 1.25vw 2.083vw;
        gap: 1.042vw;
        font-size: 1.389vw;
      }

      .btn_icon {
        fill: rgb(0, 32, 37);
        transition: transform 0.2s ease-in-out 0s;
        width: 23px;
        height: 8px;

        @media screen and (min-width: 1025px) {
          width: 1.597vw;
          height: 0.556vw;
        }
      }
    }

    .secondary_button::after {
      .afterBorder();
      transition: all 0.5s;
    }
  }
}

@media screen and (max-width: 500px) {
  .content_width_wrapper {
    padding: 20px;
    width: 100%;
    display: block;

    .gatsby-image-wrapper {
      width: 100%;
      height: 450px;
    }

    .callout_wrapper {
      -webkit-box-align: center;
      align-items: center;
      width: 100%;
      gap: 2.667vw;

      .callout_title {
        font-size: 24vw;
        text-align: center;
      }

      .callout_text {
        text-align: center;
        width: 74.133vw;
        font-size: 4.8vw;
      }

      .secondary_button {
        margin: 10px auto;
        font-size: 5.333vw;

        .btn_icon {
          width: 6.133vw;
          height: 2.133vw;
        }
      }
    }
  }
}

@media screen and (min-width: 501px) and (max-width: 1024px) {

  .content_width_wrapper {
    width: 100%;
    margin: unset;
    gap: 11.523vw;
    padding: 9.766vw 4.883vw;

    .gatsby-image-wrapper {
      width: 44.141vw;
      height: 42.808vw;
      border-radius: 2.93vw;
    }

    .callout_wrapper {
      width: 34.57vw;
      gap: 2.93vw;

      .callout_title {
        font-size: 8.789vw;
      }

      .callout_text {
        width: 26.57vw;
        font-size: 1.758vw;
      }

      .secondary_button {
        padding: 1.758vw 2.93vw;
        gap: 1.465vw;
        font-size: 1.953vw;
        width: min-content;
        .btn_icon {
          width: 2.246vw;
          height: 0.781vw;
        }
      }
      .secondary_button::after {
      .afterBorder();
      transition: all 0.5s;
    }
    }
  }
}
</style>
